<template>
  <div style="height: 100%;">
    <!-- baidu map -->
    <baidu-map
      class="map"
      ak="WgLCbjqiDIHa1s2O9w43PWpy4blHuMYs"
      ref="map"
      :min-zoom="5"
      :max-zoom="20"
      scroll-wheel-zoom
      @ready="handler"
    >
      <!-- left -->
      <div class="left" v-if="bol">
        <bm-control anchor="BMAP_ANCHOR_TOP_LEFT">
          <div class="box" :class="{ active: isUnfold }">
            <!-- 
              <div class="top">
              <div class="treeselect">
                <treeselect
                  v-model="form.deptId"
                  :options="deptOptions"
                  :show-count="true"
                  placeholder="请选择所属部门"
                  @select="treeselect"
                />
              </div>
              <div>
                <span class="unfold" @click="Unfold">
                  <i v-if="isUnfold" class="el-icon-arrow-down"></i>
                  <i v-else class="el-icon-arrow-up"></i>
                </span>
              </div>
            </div>
           -->
            <!-- tools -->
            <div class="body">
              <!-- 节点过滤 -->
              <div class="head">
                <div class="search">
                  <el-input
                    :placeholder="$t('device.tranck.filter')"
                    clearable
                    v-model="filterText"
                    maxlength="15"
                  >
                  </el-input>
                </div>
                <!-- icon -->
                <div>
                  <span class="unfold" @click="Unfold">
                    <i v-if="isUnfold" class="#xe604">
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shousuo-copy"></use>
                      </svg>
                    </i>
                    <i v-else>
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shousuo"></use>
                      </svg>
                    </i>
                  </span>
                </div>
              </div>
              <!-- tree -->
              <div class="tree">
                <!-- 树形控件 设备 -->
                <el-tree
                  :data="cardList"
                  :props="defaultProps"
                  :filter-node-method="filterNode"
                  ref="tree"
                  accordion
                  node-key="id"
                  @node-click="handleNodeClick"
                  :default-expanded-keys="expandedKeys"
                  highlight-current
                >
                </el-tree>
                <!-- 底部 -->
              </div>
            </div>
            <!-- 功能 -->
            <div class="foorter">
              <el-form inline>
                <!-- 日期 -->
                <el-row>
                  <el-form-item :label="$t('device.tranck.date')">
                    <!-- 有日期 -->
                    <div v-if="datePart.length" class="date">
                      <el-radio-group v-model="date">
                        <el-radio
                          :label="item.fAddTime"
                          v-for="(item, index) in datePart"
                          :key="index"
                          style="color: #000;border-bottom: 1px solid #000;width:100%"
                          >{{ item.fAddTime }}</el-radio
                        >
                      </el-radio-group>
                    </div>
                    <!-- 没有日期 无数据 -->
                    <div v-else class="date align">
                      {{ $t('device.tranck.none') }}
                    </div>
                  </el-form-item>
                </el-row>
                <!-- 开始时间 -->
                <el-row>
                  <!-- 时段 -->
                  <el-form-item :label="$t('device.tranck.time')">
                    <el-time-picker
                      style="width:180px"
                      v-model="queryParams.beginTime"
                      placeholder="开始时间"
                      value-format="HH-mm-ss"
                      :clearable="false"
                    >
                    </el-time-picker>
                  </el-form-item>
                </el-row>
                <!-- 结束时间 -->
                <el-row>
                  <!-- 时段 -->
                  <el-form-item :label="$t('device.tranck.time')">
                    <el-time-picker
                      style="width:180px"
                      v-model="queryParams.endTime"
                      placeholder="结束时间"
                      value-format="HH-mm-ss"
                      :clearable="false"
                    >
                    </el-time-picker>
                  </el-form-item>
                </el-row>
                <!-- 查询 -->
                <el-row style="text-align:center">
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" id="search">
                      <!-- 搜索 -->
                      {{ $t('device.tranck.button.search') }}</el-button
                    >
                    <el-button icon="el-icon-refresh" @click="reload">
                      <!-- 重置 -->
                      {{ $t('device.tranck.button.reset') }}
                    </el-button>
                  </el-form-item>
                </el-row>
              </el-form>
            </div>
          </div>
          <!-- 设备列表 -->
        </bm-control>
      </div>
      <!-- right -->
      <div class="right">
        <bm-control anchor="BMAP_ANCHOR_TOP_RIGHT">
          <!-- 播放功能 -->
          <el-row align="middle" :gutter="40" class="play">
            <el-col :span="6">
              <label for="checked">
                <el-checkbox v-model="checked" @change="change" disabled
                  ><span style="font-size:14px;color:#000">
                    <!-- 画面跟随 -->
                    {{ $t('device.tranck.label.follow') }}</span
                  ></el-checkbox
                >
              </label>
            </el-col>
            <el-col :span="18">
              <el-button id="run" disabled type="success" plain>
                <!-- 播放 -->
                {{ $t('device.tranck.button.play') }}
              </el-button>
              <el-button id="pause" disabled type="warning" plain>
                <!-- 暂停 -->
                {{ $t('device.tranck.button.pause') }}
              </el-button>
              <!-- 停止 -->
              <el-button id="stop" disabled type="danger" plain>
                {{ $t('device.tranck.button.stop') }}
              </el-button>
            </el-col>
          </el-row>
        </bm-control>
      </div>
      <!-- 清除覆盖物测试用 -->
      <div class="point-mark">
        <el-radio-group v-model="radio" style="position:relative;top:25%">
          <el-radio :disabled="single" :label="0">添加打点标记</el-radio>
          <el-radio :disabled="single" :label="1">清除打点标记</el-radio>
        </el-radio-group>
        <div style="margin-left:5%">
          <el-button id="confirm" type="success" plain>
            确定
          </el-button>
        </div>
      </div>
      <!-- GPS or WIFI -->
      <div class="singnal-mark">
        <el-radio-group
          v-model="singnal"
          style="position:relative;top:25%"
          @change="changeSingnal"
        >
          <el-radio :disabled="onlySingnal" :label="0">GPS信号</el-radio>
          <el-radio :disabled="onlySingnal" :label="1">WIFI信号</el-radio>
        </el-radio-group>
      </div>
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
    </baidu-map>
  </div>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import BmControl from 'vue-baidu-map/components/controls/Control.vue'
import BmScale from 'vue-baidu-map/components/controls/Scale.vue'
import LuShu from 'bmaplib.lushu'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { Loading } from 'element-ui'
import { track, gpsGroup } from '@/api/equipment/track.js'
import { getDev, treeselects } from '@/api/system/map'
import { wgs84tobd09, source } from '@/utils/convert'
export default {
  name: 'Track',
  components: {
    BaiduMap, // 百度地图
    BmControl, // 自定义控件
    Treeselect,
    BmScale
  },
  data () {
    return {
      checked: false, // 画面跟随
      single: true, // 清除覆盖物
      multiple: false, // 非多个禁用
      radio: undefined, // 清除覆盖物
      singnal: undefined, // GPS or WIFI
      onlySingnal: true, //
      bol: true, // 重置刷新
      isUnfold: false, // 是否展开窗口
      date: undefined, // 日期
      filterText: undefined, // 过滤文本
      cardList: undefined, // 部门列表······
      expandedKeys: [], // 默认打开的节点
      deptOptions: [],
      datePart: [],
      loading: false, // 遮罩层
      form: {
        deptId: undefined
      },
      queryParams: {
        fNumber: undefined, // 设备编号
        beginTime: '00-00-00', // 开始时间
        endTime: '23-59-59' // 结束时间
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      vue_map: undefined,
      vue_BMap: undefined,
      // 获取请求的数据
      lushu: undefined // 路书
    }
  },
  methods: {
    handler ({ BMap, map }) {
      // console.log(BMap, map)
      map.centerAndZoom(new BMap.Point(98.404, 39.915), 5) // 地图初始化
      this.vue_map = map
      this.vue_BMap = BMap
      let that = this // vue this
      let path //
      let need //
      let bdPoint //  转换的百度坐标
      let lushu //  路书
      let polyline //  正常折线
      let linePart // 折线
      let lineColor // 折线颜色
      let temp
      let displayOverlay
      let flag
      // 查询
      document.getElementById('search').addEventListener('click', async e => {
        this.radio = undefined
        flag = false
        // Loading  加载
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (!this.date) {
          this.$message.warning('请选择设备日期')
          setTimeout(() => {
            loading.close()
          }, 1000)
          return
        }
        map.clearOverlays() // 清除覆盖物
        // 请求url数据
        const res = await track({
          fNumber: this.queryParams.fNumber,
          'params[beginTime]': `${this.date} ${this.queryParams.beginTime}`,
          'params[endTime]': `${this.date} ${this.queryParams.endTime}`
        })

        if (res.code === 200) {
          // 返回的数据少于5条的提示
          if (res.data.length < 2) {
            this.$message.warning('设备时段暂无数据')
            setTimeout(() => {
              loading.close()
            }, 1000)
            return
          }
          // console.log(res.data)
          need = []
          path = []
          bdPoint = []
          temp = []
          // let lineColor = '' // 折线颜色
          /**
           *  返回后端调用bd接口转换好的数据请求使用方法
           *  res.data.map(item => {
           *  bdPoint.push(new BMap.Point(item.fLongitude, item.fLatitude))
           *  })
           */
          // 前端调用bd接口使用的方法
          for (let z = 0; z < res.data.length; z++) {
            if (
              Math.floor(res.data[z].fLongitude - 0) < 1 ||
              Math.floor(res.data[z].fLatitude - 0) < 1
            ) {
              return
            }
            if (res.data[z].fType == 0) {
              path.push(
                wgs84tobd09(
                  res.data[z].fLongitude - 0,
                  res.data[z].fLatitude - 0,
                  res.data[z].fNumber,
                  res.data[z].fStep,
                  res.data[z].fAddTime,
                  res.data[z].fGpsId,
                  res.data[z].fPrecision
                )
              )
              temp.push(res.data[z])
            } else if (res.data[z].fType == 1) {
              path.push([
                res.data[z].fLongitude - 0,
                res.data[z].fLatitude - 0,
                res.data[z].fNumber,
                res.data[z].fStep,
                res.data[z].fAddTime,
                res.data[z].fGpsId,
                res.data[z].fPrecision
              ])
              temp.push(res.data[z])
            }
          }
          /** // 打点的数据
         *    for (let index = 0; index < path.length; index++) {
            // 不大于是最后一个索引
            if (index < newPath.length - 1) {
              bdPoint.push(new BMap.Point(newPath[index][0], newPath[index][1]))
              need.push(new BMap.Point(newPath[index][0], newPath[index][1]))
              let res =
                Date.parse(newPath[index + 1][3]) - Date.parse(newPath[index][3]) >
                5 * 60 * 1000
              if (res) {
                need.push(
                  new BMap.Point(newPath[index + 1][0], newPath[index + 1][1])
                )
                lineColor = 'red' // 丢失信号红色
              } else {
                need.push(
                  new BMap.Point(newPath[index + 1][0], newPath[index + 1][1])
                )
                lineColor = '#2d8cf0' // 正常信号蓝色
              }
              // }
            }
            linePart = need.splice(0, need.length)
            // console.log(linePart)
            polyline = new BMap.Polyline(
              linePart, // 所有的GPS坐标点
              {
                enableEditing: false, // 是否启用线编辑，默认为false
                enableClicking: true, // 是否响应点击事件，默认为true
                strokeWeight: '5', // 折线的宽度，以像素为单位
                strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
                strokeColor: lineColor // 折线颜色
              }
            )
            map.addOverlay(polyline)
          }
         */

          need = []
          let n = 0,
            m = 0
          for (let i = 0; i < path.length; i++) {
            // console.log(path)
            // 清空数组,如若不清空，会在原来基础上每次在重复的增加一边。
            // 这儿是让每两个点画线，否则第二次进来的时候就成四个数据了，第二个重复了一次
            // debugger
            if (i < path.length - 1) {
              // 小于最后一条数据
              if (path[i][3] > 0) {
                // 步数大于0
                bdPoint.push(new BMap.Point(path[i][0], path[i][1]))
                need.push(new BMap.Point(path[i][0], path[i][1]))
                for (let j = i + 1; j < path.length; j++) {
                  if (path[j][3] > 0) {
                    // 步数大于0
                    if (n > 0) {
                      need.push(new BMap.Point(path[j][0], path[j][1]))
                      lineColor = '#2d8cf0' // 正常信号蓝色
                    } else {
                      let res =
                        Date.parse(path[j][2]) - Date.parse(path[i][2]) >
                        5 * 60 * 1000
                      if (res) {
                        need.push(new BMap.Point(path[j][0], path[j][1]))
                        lineColor = '#ed3f14' // 丢失信号红色
                      } else {
                        need.push(new BMap.Point(path[j][0], path[j][1]))
                        lineColor = '#2d8cf0' // 正常信号蓝色
                      }
                    }
                    n = 0
                    break
                  } else {
                    n++
                  }
                }
              }
            }
            // console.log(need)
            // let linePart = need.splice(0, need.length)
            // linePart.forEach((value, index) => {
            //   if (index === 0) {
            //     value['timer'] = path[i][4]
            //     // value['step'] = path[i][3]
            //   } else {
            //     value['timer'] = path[i + 1][4]
            //     // value['step'] = path[i + 1][3]
            //   }
            // })
            console.log(linePart)
          }
          // 判断返回的gps时间是否超过5分钟
          // let res =
          //   Date.parse(linePart[1].timer) - Date.parse(linePart[0].timer) >
          //   5 * 60 * 1000
          // if (res) {
          //   lineColor = '#ed3f14' // 丢失信号红色
          // } else {
          //   lineColor = '#2d8cf0' // 正常信号蓝色
          // }

          // console.log(linePart)
          // 绘制线路
          // let arrlinePart=[]
          // linePart.forEach(item=>{
          //  if(item[3]>5){
          //   console.log(1)
          //   arrlinePart.push(item)
          //  }
          // })
          // polyline = new BMap.Polyline(
          //   bdPoint, // 所有的GPS坐标点
          //   {
          //     enableEditing: false, // 是否启用线编辑，默认为false
          //     enableClicking: true, // 是否响应点击事件，默认为true
          //     strokeWeight: '80', // 折线的宽度，以像素为单位
          //     strokeOpacity: 0.7, // 折线的透明度，取值范围0 - 1
          //     strokeColor: lineColor // 折线颜色
          //   }
          // )
          // 添加折线
          // map.addOverlay(polyline)

          /****************** 以下是添加终点信息 ******************/
          // 终点覆盖物
          // let endPoint = new BMap.Marker(
          //   new BMap.Point(
          //     bdPoint[bdPoint.length - 1].lng,
          //     bdPoint[bdPoint.length - 1].lat
          //   ),
          //   {
          //     icon: new BMap.Icon(
          //       require('@/assets/image/end.png'),
          //       new BMap.Size(32, 32),
          //       {
          //         anchor: { width: 20, height: 30 }
          //       }
          //     )
          //   }
          // )
          // map.addOverlay(endPoint) // 添加终点覆盖物
          // // 终点文本标注
          // let endLabel = new BMap.Label('终点', {
          //   position: new BMap.Point(
          //     bdPoint[bdPoint.length - 1].lng,
          //     bdPoint[bdPoint.length - 1].lat
          //   ),
          //   offset: new BMap.Size(15, -20)
          // })
          // // 创建信息窗口
          // let opt = {
          //   width: 250,
          //   height: 250,
          //   title: `<h1 style="color:red;font-size:21px;text-align:center">设备信息展示</h1>`
          // }
          // let fNumbers = '设备号: ' + temp[temp.length - 1].fNumber
          // let lngs = '经度: ' + temp[temp.length - 1].fLongitude
          // let lats = '纬度: ' + temp[temp.length - 1].fLatitude
          // let timers = '时间: ' + temp[temp.length - 1].fAddTime
          // let steps = '步数: ' + temp[temp.length - 1].fStep
          // let fGpsIds = 'GpsId:' + temp[temp.length - 1].fGpsId
          // let nums = '起始数据: ' + '终点'
          // let fType = '数据源:' + temp[temp.length - 1].fType
          // let weixings = '卫星数量:' + temp[temp.length - 1].fPrecision
          // let infoWindows = new BMap.InfoWindow(
          //   `${'<h2>' +
          //     fNumbers +
          //     '</h2>' +
          //     '<h2>' +
          //     lngs +
          //     '</h2>' +
          //     '<h2>' +
          //     lats +
          //     '</h2>' +
          //     '<h2>' +
          //     timers +
          //     '</h2>' +
          //     '<h2>' +
          //     steps +
          //     '</h2>' +
          //     '<h2>' +
          //     fGpsIds +
          //     '</h2>' +
          //     '<h2>' +
          //     nums +
          //     '</h2>' +
          //     '<h2>' +
          //     weixings +
          //     '</h2>'}` + fType,
          //   opt
          // )
          // // 终点信息窗口点击事件
          // endPoint.onclick = e => {
          //   map.openInfoWindow(
          //     infoWindows,
          //     new BMap.Point(
          //       bdPoint[bdPoint.length - 1].lng,
          //       bdPoint[bdPoint.length - 1].lat
          //     )
          //   ) // 开启信息窗口
          // }

          // 添加终点文本标注
          // map.addOverlay(endLabel)
          /****************** 以上是添加终点信息 ******************/

          displayOverlay = function () {
            // 遍历添加覆盖物
            for (let i = 0; i < bdPoint.length; i++) {
              if (i < bdPoint.length - 1) {
                let spMarker = new BMap.Marker(
                  new BMap.Point(bdPoint[i].lng, bdPoint[i].lat),
                  {
                    icon: new BMap.Icon(
                      require('@/assets/image/end.png'),
                      new BMap.Size(32, 32),
                      {
                        anchor: { width: 20, height: 30 }
                      }
                    )
                  }
                )
                // 创建信息窗口
                var opts = {
                  width: 350,
                  height: 300,
                  title: `<h1 style="color:red;font-size:21px;text-align:center">设备信息展示</h1>`
                }
                map.addOverlay(spMarker)
                // 每个元素文本标注
                let et = new BMap.Label(i, {
                  position: new BMap.Point(bdPoint[i].lng, bdPoint[i].lat),
                  offset: new BMap.Size(15, -20)
                })
                // 添加每个元素文本标注
                map.addOverlay(et)
                // 点标记添加点击事件
                spMarker.onclick = e => {
                  // 创建信息框
                  let fNumber = '设备号: ' + newPath[i].fNumber
                  let lng = '经度: ' + newPath[i].fLongitude
                  let lat = '纬度: ' + newPath[i].fLatitude
                  let timer = '时间: ' + newPath[i].fAddTime
                  let step = '步数: ' + newPath[i].fStep
                  let fGpsId = 'GpsId:' + newPath[i].fGpsId
                  let fType =
                    '数据源:' + (newPath[i].fType == 0 ? 'GPS' : 'WIFI')
                  // let fType = '数据源:' + temp[i].fType
                  let num = '起始数据: ' + i
                  let weixing = '卫星数量:' + newPath[i].fPrecision
                  let gpa =
                    '与下一个坐标点' +
                    [i + 1] +
                    '的距离：' +
                    map
                      .getDistance(
                        new BMap.Point(newPath[i][0], newPath[i][1]),
                        new BMap.Point(newPath[i + 1][0], newPath[i + 1][1])
                      )
                      .toFixed(0) +
                    '米'
                  var infoWindow = new BMap.InfoWindow(
                    `${'<h2>' +
                      fNumber +
                      '</h2>' +
                      '<h2>' +
                      lng +
                      '</h2>' +
                      '<h2>' +
                      lat +
                      '</h2>' +
                      '<h2>' +
                      timer +
                      '</h2>' +
                      '<h2>' +
                      step +
                      '</h2>' +
                      '<h2>' +
                      fGpsId +
                      '</h2>' +
                      '<h2>' +
                      num +
                      '</h2>' +
                      '<h2>' +
                      weixing +
                      '</h2>' +
                      '<h2>' +
                      fType +
                      '</h2>' +
                      '<h2>' +
                      gpa +
                      '</h2>'}`,
                    opts
                  )
                  map.openInfoWindow(infoWindow, bdPoint[i]) // 开启信息窗口
                }
              }
            }
          }

          // 地图初始化
          // map.centerAndZoom(new BMap.Point(bdPoint[0].lng, bdPoint[0].lat), 18)

          // 转换坐标
          // res.data.map(item => {
          // 坐标转换
          // path.push(
          //   wgs84tobd09(
          //     item.fLongitude * 1,
          //     item.fLatitude * 1,
          //     item.fAddTime,
          //     item.fSteps
          //   )
          // )
          // })
          // console.log(path)
          // let lineColor = ''
          // let n = 0,
          //   m = 0

          // for (let i = 0; i < path.length; i++) {
          //   // console.log(path)
          //   // debugger
          //   if (i < path.length - 1) {
          //     if (path[i][3] > 0) {
          //       // console.log('1')
          //       bdPoint.push(new BMap.Point(path[i][0], path[i][1]))
          //       need.push(new BMap.Point(path[i][0], path[i][1]))
          //       for (let j = i + 1; j < path.length; j++) {
          //         if (path[j][3] > 0) {
          //           if (n > 0) {
          //             // console.log('2')
          //             need.push(new BMap.Point(path[j][0], path[j][1]))
          //             lineColor = '#2d8cf0' // 正常信号蓝色
          //           } else {
          //             let res =
          //               Date.parse(path[j][2]) - Date.parse(path[i][2]) >
          //               5 * 60 * 1000
          //             if (res) {
          //               need.push(new BMap.Point(path[j][0], path[j][1]))
          //               lineColor = '#ed3f14' // 丢失信号红色
          //             } else {
          //               need.push(new BMap.Point(path[j][0], path[j][1]))
          //               lineColor = '#2d8cf0' // 正常信号蓝色
          //             }
          //           }
          //           n = 0
          //           break
          //         } else {
          //           n++
          //         }
          //       }
          //     }
          // 以上是测试数据

          // 以下数据可用
          //     // console.log(need)
          //     // 清空数组,如若不清空，会在原来基础上每次在重复的增加一边。这儿是让每两个点画线，
          //     // 否则第二次进来的时候就成四个数据了，第二个重复了一次
          //     let linePart = need.splice(0, need.length)
          //     // debugger

          //     //         linePart.forEach((value, index) => {
          //     //           if (index === 0) {
          //     //             value['timer'] = path[i][2]
          //     //             // value['step'] = path[i][3]
          //     //           } else {
          //     //             value['timer'] = path[i + 1][2]
          //     //             // value['step'] = path[i + 1][3]
          //     //           }
          //     //         })
          //     // console.log(linePart)
          //     // 判断返回的gps时间是否超过5分钟
          //     // let res =Date.parse(linePart[1].timer) - Date.parse(linePart[0].timer) >
          //     //   5 * 60 * 1000
          //     // if (res) {
          //     //   lineColor = '#ed3f14' // 丢失信号红色
          //     // } else {
          //     //   lineColor = '#2d8cf0' // 正常信号蓝色
          //     // }
          //     // console.log(linePart)
          //     // 绘制线路
          //     // let arrlinePart=[]
          //     // linePart.forEach(item=>{
          //     //  if(item[3]>5){
          //     //   console.log(1)
          //     //   arrlinePart.push(item)
          //     //  }
          //     // })

          //     polyline = new BMap.Polyline(
          //       linePart, // 所有的GPS坐标点
          //       {
          //         enableEditing: false, // 是否启用线编辑，默认为false
          //         enableClicking: true, // 是否响应点击事件，默认为true
          //         strokeWeight: '8', // 折线的宽度，以像素为单位
          //         strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
          //         strokeColor: lineColor // 折线颜色
          //       }
          //     )
          //     map.addOverlay(polyline)
          //   }
          // }
          // console.log(bdPoint)
          // if (bdPoint.length > 0) {
          //   // map.centerAndZoom(new BMap.Point(bdPoint[0].lng, bdPoint[0].lat), 18)
          //   // 添加路书
          //   lushu = new LuShu(map, bdPoint, {
          //     defaultContent: '', // 覆盖物中的内容
          //     autoView: true, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
          //     icon: new BMap.Icon(
          //       require('@/assets/image/people.png'),
          //       new BMap.Size(20, 25),
          //       {
          //         anchor: { width: 15, height: 28 }
          //       }
          //     ),
          //     speed: 1000,
          //     enableRotation: false, // 是否设置marker随着道路的走向进行旋转
          //     landmarkPois: [] // 必须要定义,如果没有要显示的点话,就写成[],不能为空,否则会无法运行
          //   })
          //   that.lushu = lushu // vue this
          //   /**
          //    * 创建一个步行导航实例
          //    * @method getPlan 返回索引指定的方案。索引0表示第一条方案
          //    * @method getRoute 返回方案中索引指定的线路。索引0表示第一条线路
          //    * @method getPath 返回路线的地理坐标点数组
          //    */
          //   // 起点文本标注
          //   let st = new BMap.Label('起点', {
          //     position: new BMap.Point(bdPoint[0].lng, bdPoint[0].lat),
          //     offset: new BMap.Size(15, -20)
          //   })
          //   map.addOverlay(st)
          //   // 起点覆盖物
          //   let spMarker = new BMap.Marker(
          //     new BMap.Point(bdPoint[0].lng, bdPoint[0].lat),
          //     {
          //       icon: new BMap.Icon(
          //         require('@/assets/image/start.png'),
          //         new BMap.Size(32, 32),
          //         {
          //           anchor: { width: 20, height: 30 }
          //         }
          //       )
          //     }
          //   )
          //   map.addOverlay(spMarker)
          //   // 终点覆盖物
          //   let epMarker = new BMap.Marker(
          //     new BMap.Point(
          //       bdPoint[bdPoint.length - 1].lng,
          //       bdPoint[bdPoint.length - 1].lat
          //     ),
          //     {
          //       icon: new BMap.Icon(
          //         require('@/assets/image/end.png'),
          //         new BMap.Size(32, 32),
          //         {
          //           anchor: { width: 20, height: 30 }
          //         }
          //       )
          //     }
          //   )
          //   // 将标注添加到地图
          //   map.addOverlay(epMarker)
          //   // 终点文本标注
          //   let et = new BMap.Label('终点', {
          //     position: new BMap.Point(
          //       bdPoint[bdPoint.length - 1].lng,
          //       bdPoint[bdPoint.length - 1].lat
          //     ),
          //     offset: new BMap.Size(15, -20)
          //   })
          //   // 添加终点文本标注
          //   map.addOverlay(et)
          //   // 创建一个步行导航实例
          //   const drv = new BMap.WalkingRoute(map, {
          //     onSearchComplete: function (res) {
          //       if (drv.getStatus() === 0) {
          //         const linePois = res
          //           .getPlan(0)
          //           .getRoute(0)
          //           .getPath()
          //         /**
          //          * @method setViewport()
          //          * 根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标
          //          */
          //         map.setViewport(linePois)
          //       }
          //     }
          //   })
          //   // 检索起点
          //   let drvs = new BMap.Point(bdPoint[0].lng, bdPoint[0].lat)
          //   // 检索终点
          //   let drve = new BMap.Point(
          //     bdPoint[bdPoint.length - 1].lng,
          //     bdPoint[bdPoint.length - 1].lat
          //   )
          //   // 发起检索
          //   drv.search(drvs, drve)
          // }
          // else {
          //   loadingInstance.close()
          //   this.$message.warning('日期无步行数据')
          // }
          // else {
          //   this.$message.error('系统未知错误，请反馈给管理员')
          //   loadingInstance.close()
          // }
          this.single = false
        }
        setTimeout(() => {
          loading.close()
        }, 1000)
      })

      // 启动
      document.getElementById('run').onclick = e => {
        console.log(this.datePart + ' 请选择设备日期')
        if (!bdPoint) {
          this.$message.warning('请选择设备日期')
          this.checked = false
          this.multiple = true
          return
        }
        this.isUnfold = true
        // 起点文本标注
        // let st = new BMap.Label('起点', {
        //   position: new BMap.Point(bdPoint[0].lng, bdPoint[0].lat),
        //   offset: new BMap.Size(15, -20)
        // })
        // map.addOverlay(st)
        // // 起点覆盖物
        // let spMarker = new BMap.Marker(
        //   new BMap.Point(bdPoint[0].lng, bdPoint[0].lat),
        //   {
        //     icon: new BMap.Icon(
        //       require('@/assets/image/start.png'),
        //       new BMap.Size(32, 32),
        //       {
        //         anchor: { width: 20, height: 30 }
        //       }
        //     )
        //   }
        // )
        // // 将标注添加到地图
        // map.addOverlay(spMarker)
        // 终点覆盖物
        // let epMarker = new BMap.Marker(
        //   new BMap.Point(
        //     bdPoint[bdPoint.length - 1].lng,
        //     bdPoint[bdPoint.length - 1].lat
        //   ),
        //   {
        //     icon: new BMap.Icon(
        //       require('@/assets/image/end.png'),
        //       new BMap.Size(32, 32),
        //       {
        //         anchor: { width: 20, height: 30 }
        //       }
        //     )
        //   }
        // )
        // // 将标注添加到地图
        // map.addOverlay(epMarker)
        // // 终点文本标注
        // let et = new BMap.Label('终点', {
        //   position: new BMap.Point(
        //     bdPoint[bdPoint.length - 1].lng,
        //     bdPoint[bdPoint.length - 1].lat
        //   ),
        //   offset: new BMap.Size(15, -20)
        // })
        // map.addOverlay(et)
        // map.centerAndZoom(new BMap.Point(bdPoint[0].lng, bdPoint[0].lat), 18)
        // 路书启动
        // lushu.start()
      }
      // 暂停
      document.getElementById('pause').onclick = e => {
        if (!bdPoint) {
          this.$message.warning('请选择设备日期')
          this.checked = false
          this.multiple = true
          return
        }
        // lushu.pause()
      }
      // 停止
      document.getElementById('stop').onclick = e => {
        if (!bdPoint) {
          this.$message.warning('请选择设备日期')
          this.checked = false
          this.multiple = true
          return
        }
        // lushu.stop()
      }
      // 鼠标进入左边控件禁用百度地图滚轮放大缩小
      document.querySelector('.box').onmouseover = e => {
        map.disableScrollWheelZoom()
      }
      // 鼠标离开左边控件启用百度地图滚轮放大缩小
      document.querySelector('.box').onmouseout = e => {
        map.enableScrollWheelZoom()
      }
      // 删除指定的覆盖物
      function partRemove () {
        var allOverlay = map.getOverlays() // 获取所以覆盖物
        for (var i = 0; i < allOverlay.length; i++) {
          if (allOverlay[i].toString() == '[object Marker]') {
            map.removeOverlay(allOverlay[i])
          }
          if (allOverlay[i].toString() == '[object Label]') {
            map.removeOverlay(allOverlay[i])
          }
        }
      }
      // 添加 / 清除覆盖物
      document.getElementById('confirm').onclick = e => {
        // Loading  加载
        // Loading  加载
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (!bdPoint) {
          this.$message({
            showClose: true,
            message: '无打点标记可操作',
            type: 'warning'
          })
          setTimeout(() => {
            loading.close()
          }, 1000)
          return
        }
        if (this.radio === 0) {
          if (flag) {
            this.$message({
              showClose: true,
              message: '覆盖物已经存在,无需再添加',
              type: 'warning'
            })
            setTimeout(() => {
              loading.close()
            }, 1000)
            return
          } else {
            flag = true
            displayOverlay()
            setTimeout(() => {
              loading.close()
            }, 1000)
          }
        } else if (this.radio === 1) {
          partRemove()
          flag = false
          setTimeout(() => {
            loading.close()
          }, 1000)
        } else {
          this.$message({
            showClose: true,
            message: '请选择添加或者移除覆盖物',
            type: 'warning'
          })
          setTimeout(() => {
            loading.close()
          }, 1000)
          return
        }
      }
    },
    // checkbox禁用按钮
    change (value) {
      if (value) {
        this.multiple = false
      } else {
        this.multiple = true
      }
    },
    // 是否展开工具组件
    Unfold () {
      this.isUnfold = !this.isUnfold
    },
    // 发送节目设备下拉树
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 点击获取部门id
    handleNodeClick (data) {
      this.queryParams.fNumber = data.id
      this.date = '' // 清空日期
      this.getGpsGroup()
    },
    // 获取部门列表
    async gettreeselect () {
      const res = await treeselects()
      // console.log(res)
      if (res.code === 200 && res.data.length > 0) {
        this.deptOptions = res.data
        // this.form.deptId = res.data[0].id
        this.getDevList()
      }
    },
    // 获取设备列表
    getDevList () {
      getDev(this.form)
        .then(res => {
          // console.log(res)
          this.cardList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 根据设备号获取gps时间
    async getGpsGroup () {
      const res = await gpsGroup({
        fNumber: this.queryParams.fNumber
      })
      this.datePart = res.data
    },
    // treeselect根据id
    treeselect (node) {
      getDev({ deptId: node.id })
        .then(res => {
          // console.log(res.data)
          this.cardList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 重置
    reload () {
      this.bol = false
      this.$nextTick(() => {
        this.filterText = undefined
        this.queryParams.fNumber = undefined
        this.datePart = []
        this.date = undefined
        this.queryParams.beginTime = '00-00-00'
        this.queryParams.endTime = '23-59-59'
        this.bol = true
      })
    },
    changeSingnal () {
      if (this.singnal === 0) {
        // Loading  加载
        // Loading  加载
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        setTimeout(() => {
          loading.close()
        }, 1000)
      } else {
        // Loading  加载
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        console.log('WIFI')
        setTimeout(() => {
          loading.close()
        }, 1000)
      }
    }
  },
  created () {},
  mounted () {},
  activated () {
    if (this.$store.state.deptId) {
      this.form.deptId = this.$store.state.deptId
      this.gettreeselect()
    }
  },
  watch: {
    filterText (val) {
      // input框 输入的值
      this.$refs.tree.filter(val)
      this.date = undefined // 清空绑定日期数据
      this.datePart = [] // 清空遍历日期数据
    },
    isUnfold (newVal) {
      if (!newVal) {
        this.checked = false
        this.change()
        if (this.lushu) {
          this.lushu.pause()
        }
      }
    },
    cardList: {
      handler () {
        this.cardList.forEach(item => {
          this.expandedKeys.push(item.id)
        })
      },
      deep: true
    },
    // 自定义滚动条到底部
    datePart (newVal) {
      if (newVal.length > 5) {
        this.$nextTick(() => {
          let date = document.querySelector('.date')
          date.scrollTop = date.scrollHeight
        })
      }
    },
    '$store.state.deptId' (val) {
      this.form.deptId = val
      this.gettreeselect()
    }
  }
}
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: '微软雅黑';
  border: 1px solid #0094ff;
}
.body {
  font-size: 14px;
  .head {
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 1);
    position: relative;
    .unfold {
      position: absolute;
      top: 0.75rem;
      right: 1rem;
      padding: 0 5px;
      cursor: pointer;
      background-color: #9fd7fc;
      border: 1px solid gray;
      i {
        color: orangered;
        font-weight: 900;
        font-size: 15px;
        margin-top: 2px;
      }
    }
    label.el-radio {
      color: #fff;
    }
    .top {
      margin-top: -10px;
      padding: 5px 50px;
    }
    .search {
      width: 11.5rem;
    }
    .description {
      display: flex;
      padding: 8px 0 3px;
      justify-content: space-around;
    }
    .bottom {
      opacity: 0.8;
      hr:nth-of-type(1) {
        margin-bottom: 5px;
      }
      hr:nth-of-type(2) {
        margin-top: 5px;
      }
    }
  }
  .tree {
    width: 100%;
    height: 200px;
    border: 2px solid #000;
    white-space: nowrap;
    overflow: scroll;
    background: #ccc;
    .el-tree {
      min-width: 250px;
      color: #000;
      background: #ccc;
      .el-tree-node {
        height: 100%;
        .el-tree-node__content {
          height: 18px;
        }
      }
    }
    .el-button {
      bottom: 0;
      left: 10px;
      padding: 8px;
      width: 140px;
      font-size: 14px;
      font-weight: 700;
      &:nth-of-type(2) {
        left: 155px;
      }
    }
  }
}
::v-deep.box {
  width: 245px;
  height: 700px;
  overflow: hidden;
  &.active {
    height: 48px;
  }
  .el-table::before {
    height: 0;
  }
  .el-table--medium th,
  .el-table--medium td {
    padding: 0;
  }
  .top {
    height: 45px;
    display: flex;
    align-items: center;
    padding: 3px;
    background-color: rgba(144, 147, 153, 1);
    .treeselect {
      width: 11.5rem;
    }
    span {
      color: #fff;
      font-weight: 700;
      margin-left: 20px;
    }
    .el-col {
      width: 300px;
      margin-left: 20px;
    }
  }
  .foorter {
    // height: 100%;
    color: #fff;
    padding: 5px;
    background-color: rgba(0, 0, 0, 1);
    .date {
      width: 180px;
      height: 150px;
      color: #000;
      background-color: #c0c4cc;
      overflow: auto;
      .el-radio {
        padding: 2.5px;
      }
    }
    .align {
      font-size: 25px;
      font-weight: bold;
      line-height: 150px;
      text-align: center;
    }
    label.el-form-item__label {
      color: #fff;
    }
    .el-radio {
      margin-right: 5px;
    }
    .el-radio__label {
      padding-left: 5px;
    }
  }
}
.play {
  height: 45px;
  line-height: 45px;
  background-color: rgba(144, 147, 153, 1);
}
.point-mark {
  margin-top: 45px;
  position: absolute;
  right: 0%;
  top: 85px;
  color: #000;
  width: 371px;
  height: 46px;
  padding: 5px;
  display: flex;
  background-color: #ccc;
}
.singnal-mark {
  margin-top: 45px;
  position: absolute;
  right: 0%;
  top: 130px;
  color: #000;
  width: 371px;
  height: 46px;
  padding: 5px;
  display: flex;
  background-color: #c0c4cc;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  color: #000;
}
// 自动移滚动条样式 css实现滚动条兼容mac和windows
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background-color: rgba(193, 193, 193, 1);
}
::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: rgba(50, 50, 50, 1);
}
.el-tree__empty-text {
  color: #000 !important;
}
</style>
